<script>
export default {
  name: "TempBox",
  props: {
    deviceId: [String, Number],
    temp: [String, Number],
    humid: [String, Number]
  }
}
</script>

<template>
  <dv-border-box13 class="container" :title="deviceId">
    <h1 class="box-content" style="margin-top: 30px">{{ '温湿度计 '+deviceId }}</h1>
    <el-divider border-style="solid" style="margin: 5px 0 10px 45px;width: 100px;border-top: 5px solid black;"></el-divider>
    <!--温度显示-->
    <el-row justify="center" class="box-content">
      <el-col :span="4" class="col-center">
        <img src="@/icons/wendu.svg" class="svg-icon" alt="Icon"/>
      </el-col>
      <el-col :span="10" class="col-center">
        <p class="chi text">温度</p>
        <p class="eng text">Temperature</p>
      </el-col>
      <el-col :span="8" class="col-center">
        <p class="normal-value text">{{ temp }}</p>
      </el-col>
      <el-col :span="2" class="col-center">
        <p class="text">℃</p>
      </el-col>
    </el-row>
    <!--湿度显示-->
    <el-row justify="center" class="box-content">
      <el-col :span="4" class="col-center">
        <img src="@/icons/shidu-.svg" class="svg-icon" alt="Icon"/>
      </el-col>
      <el-col :span="10" class="col-center">
        <p class="chi text">湿度</p>
        <p class="eng text">Humidity</p>
      </el-col>
      <el-col :span="8" class="col-center">
        <p class="normal-value text">{{ humid }}</p>
      </el-col>
      <el-col :span="2" class="col-center">
        <p class="text">%</p>
      </el-col>
    </el-row>
  </dv-border-box13>
</template>

<style scoped>
.col-center{
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.container {
  font-weight: bolder;
  width: 450px;
  height: 350px;
  margin: 10px;
}
.box-content{
  margin: 0 10px 0 30px;
  padding: 5px;
}
.svg-icon{
  width: 100%;
}
.text{
  margin: 5px;
  font-size: 20px;
  text-align: left;
}
.chi{
  font-size: 25px;
  font-weight: bolder;
}
.normal-value{
  font-size: 60px;
  font-weight: bolder;
}

</style>